const boxChartRight2 = (ret) => {
    let list = [{
        name: "待建设",
        value: ret[0] || 1
    }, {
        name: "建设中",
        value: ret[1] || 0
    }, {
        name: "已投放",
        value: ret[2] || 0
    }]

    let sum = 0;
    list.map((item, index) => {
        sum += parseInt(item.value)
    })

    list.push({
        name: '',
        value: sum
    })
    let colorList = ['#FF8F1F', '#7916ff', '#008C28', "rgba(0,0,0,0)"]

    let rightBoxOptions = {
        tooltip: {},
        color: colorList,
        legend: {
            orient: 'horizontal',
            x: 'center',
            y: 170,
            icon: "circle",
            itemGap: 25,
            textStyle: {
                color: '#fff',
                fontSize: 14,
                fontWeight: 400
            },
        },
        lineHeight: 26,
        series: [{
            name: "",
            type: "pie",
            hoverAnimation: false,
            startAngle: -180,
            radius: ["50%", "90%"],
            center: ["50%", "60%"],
            lineHeight: 40,
            tooltip: {
                show: true, // 是否显示
                padding: 0,
                textStyle: { // 提示框浮层的文本样式。
                    color: '#fff',
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    fontFamily: 'sans-serif',
                    fontSize: 14,
                },
                normal: {
                    formatter: function (params) {
                        if (!params.data.name) {
                            return ''
                        }
                        return `${params.data.name}\n{b|${params.percent * 2}%}`;
                    },
                    rich: {
                        b: {
                            color: '#fff',
                            lineHeight: 18,
                            fontSize: 12,
                            align: 'left',
                        },
                    }
                }
            },
            label: {
                normal: {
                    formatter: function (params) {
                        if (!params.data.name) {
                            return ''
                        }
                        return `${params.data.name}\n{b|${params.percent * 2}%}`;
                    },
                    rich: {
                        b: {
                            color: '#fff',
                            lineHeight: 18,
                            fontSize: 12,
                            align: 'left',
                        },
                    },
                    color: "#fff",
                    show: true,
                    padding: [-10, 0, 0, 0],
                },
            },
            labelLine: {
                normal: {
                    length: 1,
                    length2: 5,
                    lineStyle: {
                        color: '#fff',
                    },
                    maxSurfaceAngle: 80,
                    show: false,
                },
            },
            data: list,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                },
            },
        },],
    };

    var rightPart1Dom = document.getElementById('rightPart1');
    let rightPart1Chart = echarts.init(rightPart1Dom);

    rightPart1Chart.setOption(rightBoxOptions)

    window.addEventListener('resize', function () {
        rightPart1Chart.setOption(rightBoxOptions)
    })

}

const annulSelectBox = sourceData => {
    var data1 = [{
        name: '2022年度',
        id: 2022
    },
        {
            name: '2021年度',
            id: 2021
        },
        {
            name: '2020年度',
            id: 2020
        },
        {
            name: '2019年度',
            id: 2019
        }
    ];
    if (sourceData && sourceData.length > 0) {
        data1 = [];
        sourceData.forEach(it => {
            if( (it+'').length == 4) {
              data1.push({
                name: it,
                id: it
              })
            }
        })
    }

    const fnBack1 = async function (result) {
        ajaxCall("/getHouseYearDeclare/" + result.id).then(ret => {
            $("#houseYearDeclare1").text(parseInt(ret.data[0] || 0));
            $("#houseYearDeclare2").text(parseInt(ret.data[1] || 0));
            $("#houseYearDeclare3").text(parseInt(ret.data[2] || 0));
            $("#houseYearDeclare4").text(parseInt(ret.data[3] || 0));
        });

    };
    new SelectBox($('#rightSelect2'), data1, fnBack1, {
        color: '#fff', //输入框字体颜色
        optionColor: '#fff', //下拉框字体颜色
        arrowColor: '#fff', //箭头颜色
        backgroundColor: '#7916ff', //背景色颜色
        borderColor: '#7916ff', //边线颜色
        hoverColor: '#7916ff', //下拉框HOVER颜色
        borderWidth: 1, //边线宽度
        defalut: 'firstData', //默认显示内容。如果是'firstData',则默认显示第一个
        arrowBorderWidth: 0, //箭头左侧分割线宽度。如果为0则不显示
        borderRadius: 5, //边线圆角
        height: 30, //高
        width: 111,
        textIndent: 7,
        placeholder: 'box6', //默认提示
    });
}

const boxChartRight = (source) => {
    var data = [{
            name: '安置房（限价房）',
            id: 1
         },
        {
            name: '公（廉）租房',
            id: 2
        },
        {
            name: '人才房',
            id: 3
        },
        {
            name: '保障性租赁住房',
            id: 4
        },
        {
            name: '共有产权房',
            id: 5
        }
    ];
    if (source && source.length > 0) {
        data = [];
        source.forEach(it => {
            if (it.length > 0) {
                data.unshift({
                    name: it,
                    id: it
                })
            }
        });
    }
    const fnBack = function (result) {
        ajaxCall("/getProjectSummary/" + result.name).then(ret => {
            boxChartRight2(ret.data);
        }).catch(err => {
            boxChartRight2([1, 0, 0]);
        });
    };
    new SelectBox($('#rightSelect1'), data, fnBack, {
        color: '#fff', //输入框字体颜色
        optionColor: '#fff', //下拉框字体颜色
        arrowColor: '#fff', //箭头颜色
        backgroundColor: '#7916ff', //背景色颜色
        borderColor: '#7916ff', //边线颜色
        hoverColor: '#7916ff', //下拉框HOVER颜色
        borderWidth: 1, //边线宽度
        defalut: 'firstData', //默认显示内容。如果是'firstData',则默认显示第一个
        arrowBorderWidth: 0, //箭头左侧分割线宽度。如果为0则不显示
        borderRadius: 5, //边线圆角
        height: 30, //高
        width: 135,
        textIndent: 7,
        placeholder: 'box6', //默认提示
    });
}

$(function () {

    ajaxCall("/getProjectHouseNameList").then(ret => {
        boxChartRight(ret.data);
    }).catch(err => {
        boxChartRight([]);
    })


    ajaxCall("/getAnnualList").then(ret => {
        annulSelectBox(ret.data || []);
    }).catch(err => {
        annulSelectBox([]);
    })


    $('#rightSelect3').on('click', function () {
        $('#dialogBg').show();
        $('#dialog2').css('visibility', "visible").removeClass('modal-leave-active').addClass(
            'modal-enter-active')
    })

    $('.right-search-btn').on('click', function () {
        $('#dialogBg').show();
        $('#dialog1').css('visibility', "visible").removeClass('modal-leave-active').addClass(
            'modal-enter-active')
    })

    $('#rightSelect4').on('click', function () {
        $('#dialogBg').show();
        $('#dialog3').css('visibility', "visible").removeClass('modal-leave-active').addClass(
            'modal-enter-active')
    })

    $('.dialog-close').on('click', function () {
        $('#dialogBg').hide();
        $(this).parent().parent().removeClass('modal-enter-active').addClass('modal-leave-active')
            .delay(200).css('visibility', "hidden");
    })
});
